<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input v-model="form.taskCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工单状态:">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="代办" :value="1"></el-option>
            <el-option label="进行" :value="2"></el-option>
            <el-option label="取消" :value="3"></el-option>
            <el-option label="完成" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchOrderFn"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 信息列表区域 -->
    <div class="result">
      <el-button class="btn" icon="el-icon-circle-plus" @click="addOrderFn"
        >新建</el-button
      >
      <!-- table表格区域 -->
      <el-table :data="tableData" style="width: 100%" row-height="44px" cell-style="padding: 4px">
        <el-table-column type="index" :index="indexFn" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="taskCode" label="工单编号"> </el-table-column>
        <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
        <el-table-column prop="taskType.typeName" label="工单类型">
          <!-- <template v-slot="{ row }">
            1:投放工单;2:补货工单;3:维修工单;4:撤机工单
            <span>{{
              row.taskType.typeId === 1
                ? "投放工单"
                : row.taskType.typeId === 2
                ? "补货工单"
                : row.taskType.typeId === 3
                ? "维修工单"
                : "撤机工单"
            }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="手动" label="工单方式">
          <template v-slot="{ row }">
            <!-- 1:手动;0:自动 -->
            <span>{{ row.createType === 1 ? "手动" : "自动" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="工单状态">
          <template v-slot="{ row }">
            <!-- 1:待办;2:进行;3:取消;4:完成 -->
            <span>{{
              row.taskStatusTypeEntity.statusId === 1
                ? "待办"
                : row.taskStatusTypeEntity.statusId === 2
                ? "进行"
                : row.taskStatusTypeEntity.statusId === 3
                ? "取消"
                : "完成"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="运营人员"> </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" size="medium" @click="lookInfoFn(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
        <div class="footbtn">
          <div class="page">
            <span> 共 {{totalCount}}条记录 第{{pageParams.pageIndex}}/{{ totalPage }}页</span>
          </div>
        <!-- 分页按钮 -->
          <el-row type="flex" justify="end">
          <el-pagination
          layout="prev, next"
          prev-text="上一页"
          :current-page.sync="pageParams.pageIndex"
          @current-change="changeFn"
          next-text="下一页"
          :total="pageParams.totalCount">
        </el-pagination>
          </el-row>
        </div>
    </div>
    <!-- 新增工单弹层 -->
    <el-dialog title="新增工单" width="630px" :visible.sync="showAddForm" @close="closeFn">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px">
        <el-form-item label="设备编号:" prop="innerCode">
          <el-input v-model="addForm.innerCode"
          @input="getOperatorListFn(addForm.innerCode)"
          autocomplete="off" style="width:360px"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型:" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择" style="width:360px">
            <el-option label="补货工单" value="补货"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量:">
          <el-button type="text" @click="getAddForm"> <i class="el-icon-tickets"></i> 补货清单</el-button>
        </el-form-item>
        <el-form-item label="运营人员:" prop="person">
          <el-select v-model="addForm.person" placeholder="请选择" style="width:360px">
            <template v-for="(item,index) in operatorList">
              <el-option :label="item.userName" :value="index" :key="index"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="tips">
          <el-input type="textarea" placeholder="请输入备注 (不超过40字)" rows="3" v-model="addForm.tips" autocomplete="off" style="width:360px"></el-input>
        </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="18">
            <el-button size="medium" class="primary2" @click="closeFn">取 消</el-button>
            <el-button size="medium" class="primary1" @click="closeFn">确 定</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 补货清单弹层 -->
    <el-dialog title="补货详情" :visible.sync="showRepForm" width="630px">
      <el-table :data="repList" class="v-infinite-scroll" style="overflow:auto; height: 330px">
        <el-table-column property="channelCode" label="货道编号"></el-table-column>
        <el-table-column property="sku.skuName" label="商品名称"></el-table-column>
        <el-table-column property="currentCapacity" label="当前数量"></el-table-column>
        <el-table-column property="maxCapacity" label="还可添加"></el-table-column>
        <el-table-column label="补满数量" width="200">
          <el-input-number
              v-model="number"
              controls-position="right"
              style="width: 180px"
              @change="handleChange"
              :min="0"
              :max="100"
              placeholder="请输入"
            ></el-input-number>
        </el-table-column>
      </el-table>
        <el-row type="flex" justify="center" style="margin-top: 20px">
          <el-col :span="8">
            <el-button size="medium" class="primary2" @click="showRepForm = false">取 消</el-button>
            <el-button size="medium" class="primary1" @click="showRepForm = false">确 定</el-button>
          </el-col>
        </el-row>
    </el-dialog>
    <!-- 工单配置弹层 -->
    <OrderConfig
    :showOrderConfig.sync="showOrderConfig"
    ref="orderForm"
    >
    </OrderConfig>
    <!-- 查看详情弹层 -->
    <WatchDetail
    :showDetail.sync="showDetail"
    :detailRow="detailRow"
    ></WatchDetail>
  </div>
</template>

<script>
import WatchDetail from './components/WatchDetail'
import OrderConfig from './components/OrderConfig'
import { getOrdersList, searchOrder, getOperatorList, getRepList } from '@/api/order'
export default {
  components: {
    OrderConfig,
    WatchDetail
  },
  data () {
    return {
      showDetail: false, // 查看详情显示
      showRepForm: false, // 补货清单显示
      repList: [],
      number: 10, // 补满数量
      showOrderConfig: false, // 工单配置显示
      form: { // 搜索项
        taskCode: null,
        status: null
      },
      addForm: { // 新增工单
        innerCode: null,
        type: null,
        person: null,
        tips: null
      },
      showAddForm: false, // 新增工单显示
      rules: {
        innerCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请输入', trigger: 'change' }],
        person: [{ required: true, message: '请输入', trigger: 'change' }],
        tips: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      tableData: [], // 工单列表
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: true
      },
      totalCount: 0, // 总工单数
      totalPage: 0, // 总页数
      operatorList: [], // 运营人员列表
      detailRow: {} // 当前行数据
    }
  },
  created () {
    this.getOrdersList()
  },
  methods: {
    // 查看详情
    lookInfoFn (row) {
      this.showDetail = true
      this.detailRow = row
    },
    handleChange () {

    },
    // 滚动加载
    load () {
      this.repList += 2
    },
    // 工单配置
    orderConfigFn () {
      this.showOrderConfig = true
      this.$refs.orderForm.getOrderConfigNum()
    },
    // 表格序号
    indexFn (index) {
      return index + this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + 1
    },
    // 分页加载
    changeFn () {
      this.getOrdersList()
    },
    // 获取工单列表
    async getOrdersList () {
      const res = await getOrdersList({ ...this.pageParams })
      // console.log(res)
      res.data.currentPageRecords.forEach(item => {
        item.createTime = item.createTime.replace(/T/g, ' ')
      })
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    },
    // 搜索工单
    async searchOrderFn () {
      const res = await searchOrder({ ...this.form, ...this.pageParams })
      this.tableData = res.data.currentPageRecords
    },
    // 新建工单
    addOrderFn () {
      this.showAddForm = true
    },
    // 获取运营人员列表
    async getOperatorListFn (innerCode) {
      const res = await getOperatorList(innerCode)
      this.operatorList = res.data
    },
    // 判断当运营人员不为空的时候才能点击补货清单
    async getAddForm () {
      if (this.operatorList.length !== 0) {
        this.showRepForm = true
        const res = await getRepList(this.addForm.innerCode)
        this.repList = res.data
      }
    },
    // 关闭时执行的方法
    closeFn () {
      this.$refs.addForm.resetFields()
      this.operatorList = []
      this.showAddForm = false
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 15px;
  .search {
    display: flex;
    height: 64px;
    align-items: center;
    padding-left: 17px;
    background-color: #fff;
    .demo-form-inline {
      margin-top: 21px;
    }
  }
  .result {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
    .btn {
      background-color: #ff893a;
      color: #fff;
    }
     .table{
        padding: 20px 15px 19px 17px;
        background-color: #fff;
      }
      .footbtn{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      }
  }
}
.primary1{
  margin-left: 40px !important;
  background-color: #ff722c;
  color: #fff;
}
.page{
    span{
    display: inline-block;
    font-size: 16px;
    color: #e5e2e5;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    box-sizing: border-box;
    }
}
/deep/ .btn-prev,/deep/.btn-next{
  span{
  display: inline-block;
  width: 70px;
  height: 32px;
  border-radius: 2px;
  background-color: #d5ddf8;
  }
}
/deep/.el-dialog {
  border-radius: 10px;
}
// /deep/ .el-table__cell{
//   line-height: 44px;
//   padding: 0;
//   margin: 0;
// }
</style>
